<template>
  <div class="footer-content">
    <div class="link">
      <div class="single ani" v-for="(item,index) in nav.sitemaps" :key="index" :class="{aboutus: index > 1}" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay=".4s">
        <span class="label inline-element">{{item.name}}</span>
        <router-link v-if="item.children" v-for="(item2,index2) in item.children" :key="index2" :to="getLinkUrl(item,item2,index2)" class="child inline-element" tag="span">{{item2.name}}</router-link>
      </div>
    </div>
    <div class="location-bottom">
      <p>版权所有:{{nav.company.icp}}</p>
      <p>公司地址：{{nav.company.detail}}</p>
      <p>{{nav.company.copyright}} </p>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {
      }
    },
    props: {
    },
    computed: {
      ...mapGetters([
        'nav'
      ])
    },
    methods: {
      getLinkUrl (item, item2, index2) {
        switch (item.target) {
          case 'MENU_PRODUCT':
            return `/product/${item2.target}/0`
          case 'MENU_NEWS':
            return `/list/${item2.target}`
          case 'MENU_ABOUT':
            return `/aboutUs/${index2}`
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer-content {
  	@include height100-bg('./img/footer-bg.jpg');
  	@include flex-center;
  	text-align: center;
  	// .link {
  	// 	display: flex;
  	// 	width: rem(400);
  	// 	flex-wrap: wrap;
  	// 	.aboutus {
  	// 		margin-top: rem(120);
  	// 	}
  	// 	.single {
  	// 		width: 50%;
  	// 		.label {
  	// 			font-size: rem(32);
  	// 			color: #333;
  	// 			border-bottom: 1px solid #333;
  	// 			padding-bottom: rem(13);
  	// 		}
  	// 		.child {
  	// 			display: inline-block;
  	// 			font-size: rem(30);
  	// 			color: #666;
  	// 			margin-top: rem(38);
  	// 		}
  	// 	}
  	.link {
      display: flex;
      margin-top: rem(-20);
  		.aboutus {
  			margin-top: rem(120);
  		}
  		.single {
        width: 30.3%;
        margin: 0 3%;
  			.label {
  				font-size: rem(32);
  				color: #333;
  				border-bottom: 1px solid #333;
  				padding-bottom: rem(13);
  			}
  			.child {
  				display: inline-block;
          width: 100%;
  				font-size: rem(30);
  				color: #666;
  				margin-top: rem(38);
  			}
  		}
  	}
  	.location-bottom {
  		position: absolute;
  		width: 100%;
  		box-sizing: border-box;
  		padding-top: rem(32);
  		font-size: rem(26);
  		height: rem(200);
  		bottom: 0;
  		left: 0;
  		background-color: #474747;
  		color: #fff;
  		text-align: center;
  		line-height: rem(42);
  	}
  }
</style>
